<template>
  <div class="edit">
    <img class="title" :src="require('../assets/images/edit-title.png')" alt="">
    <div class="bottom">
      <div class="trapezoid1"></div>
      <div class="trapezoid2"></div>
      <div class="screen">
        <image-cropper
          ref="imageCropper"
          :base64="base64"
          :cropperConfig="cropperConfig"
          :callback="loadImage"></image-cropper>
      </div>
      <div @click="selectPhoto()" class="button button1 icon animated pulse infinite"></div>
      <div @click="next()" class="button button2 icon animated pulse infinite"></div>
    </div>
    <cloud></cloud>
  </div>
</template>

<script>
import imageCropper from '@/components/imageCropper'
import cloud from '@/components/cloud'
import { mapState } from 'vuex'
export default {
  name: 'edit',
  components: {
    cloud,
    imageCropper
  },
  computed: {
    ...mapState(['base64'])
  },
  data () {
    return {
      cropperConfig: {
        width: 520,
        height: 1080,
        quality: 0.7,
        maxWidth: 520
      }
    }
  },
  methods: {
    selectPhoto () {
      this.$refs.imageCropper.checkPhoto()
    },
    next () {
      this.$refs.imageCropper.confirm()
    },
    loadImage (data) {
      // console.log('cropperBase64>>>', data)
      if (data.length < 20) {
        return this.$tools.openToast({
          msg: '请先选择照片',
          duration: 3000
        })
      }
      this.$store.commit('cropperBase64', data)
      this.$router.push({
        path: '/style'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
.edit{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.title{
  margin:.8rem auto;
  margin-top:10%;
  margin-bottom:0;
  display:block;
  width:3.68rem;
  z-index:10;
}
.bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2.2rem;
  background-color:#56d1c8;
  // overflow-x:hidden;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:4.8rem;
  height:0;
  border-width:0 2.4rem 2.4rem 2.4rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:4.2rem;
  border-width:0 1.8rem 1.8rem 1.8rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
.screen{
  position:absolute;
  z-index:1;
  bottom:1.2rem;
  left:50%;
  transform: translateX(-50%);
  width:4rem;
  height:8.30769rem;
  border:.1rem solid #FFF;
}
.button{
  position:absolute;
  bottom:.3rem;
  width:2.9rem;
  height:.68rem;
  color:#FFF;
}
.button1{
  @include bg-image('../assets/images/edit-button1');
  left:.5rem;
}
.button2{
  @include bg-image('../assets/images/edit-button2');
  right:.5rem;
}
</style>
